<template>
  <div id="app">
    <!-- 主布局容器 -->
    <div class="app-container">
      <!-- 路由视图 - 页面内容渲染区 -->
      <router-view class="main-content" />
    </div>
    
    <!-- 鼠标点击效果容器 -->
    <div ref="cursorContainer" class="cursor-container"></div>
  </div>
</template>

<script setup>
import { initTheme } from '@/utils/theme'
import { debounce } from 'lodash-es'
import logoUrl from '@/assets/images/logo.webp'
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 静态网站配置
const staticWebConfig = {
  name: "cabbage_blog",
  logo: logoUrl,
  description: "静态资源版网站"
}

// 初始化主题
initTheme()

// 创建对 cursorContainer 的引用
const cursorContainer = ref(null)

/**
 * 初始化鼠标点击效果 (修复版)
 */
const initCursorEffect = () => {
  const handleClick = debounce((e) => {
    const cursor = document.createElement('div')
    cursor.className = 'cursor-fx'
    cursor.style.left = `${e.clientX}px`
    cursor.style.top = `${e.clientY}px`
    
    // 使用 ref 引用容器元素
    cursorContainer.value.appendChild(cursor)
    
    const removeElement = () => {
      cursor.remove()
      cursor.removeEventListener('animationend', removeElement)
    }
    cursor.addEventListener('animationend', removeElement)
  }, 50, { leading: true })
  
  document.addEventListener('click', handleClick)
  
  // 使用 Vue 3 的生命周期钩子替代 this.$once
  onBeforeUnmount(() => {
    document.removeEventListener('click', handleClick)
  })
}

// 在组件挂载后初始化鼠标效果
onMounted(() => {
  initCursorEffect()
})
</script>

<style lang="scss">
@import 'animate.css';
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

* {
  margin: 0;
  padding: 0;
  font-family: "font";
  box-sizing: border-box;
}

body {
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
}

.app-container {
  display: flex;
  min-height: 100vh;
  
  .main-content {
    flex: 1;
    padding: 40px 5%; /* 增加左右内边距 */
    min-width: 0;
    max-width: none; /* 解除最大宽度限制 */
  }
}

.cursor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  
  .cursor-fx {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.6;
    transform: translate(-50%, -50%);
    animation: cursorAnim 0.8s ease-out forwards;
  }
}

@keyframes cursorAnim {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .app-container {
    .main-content {
      padding: 15px;
    }
  }
}
</style>